<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}我的页面{% endblock %}</title>  <!-- 默认标题 -->
    <link rel="stylesheet" href="{{ url_for('static', filename='sss.css') }}">
</head>
<body>
    <img id="profile-picture" 
     src="{{ user.avatar_path }}?t={{ time() }}" 
     alt="Profile Picture" 
     class="profile-picture" 
     onclick="openUploadModal()">
    <div id="uploadModal" style="display: none;" class="upload-modal">
        <div class="modal-content">
            <span id="cancelButton" class="close">&times;</span>
            <h3>上传头像</h3>
            <form id="uploadForm" action="{{ url_for('upload_avatar') }}" method="POST" enctype="multipart/form-data">
                <input type="file" id="file-input" name="avatar" accept="image/*" onchange="previewAvatar(event)" required>
                <br>
                <button type="submit" id="uploadButton">上传</button>
            </form>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const profilePicture = document.getElementById('profile-picture');
            const uploadModal = document.getElementById('uploadModal');
            const fileInput = document.getElementById('file-input');
            const cancelButton = document.getElementById('cancelButton');

            profilePicture.addEventListener('click', () => {
                uploadModal.style.display = 'block'; // 显示弹窗
            });

            cancelButton.addEventListener('click', () => {
                uploadModal.style.display = 'none'; // 隐藏弹窗
                fileInput.value = ''; // 清空文件输入框
            });

            window.addEventListener('click', (e) => {
                if (e.target === uploadModal) {
                    uploadModal.style.display = 'none';
                    fileInput.value = '';
                }
            });
        });
    </script>
 <span>{{ user_status.name }}</span>
 <div class="actions">
     {% if user_status.name == "未登录" %}
         <a href="{{ url_for('login') }}" class="action-link">立即登录</a>
     {% else %}
         <a href="{{ url_for('logout') }}" class="action-link">退出登录</a>
     {% endif %}
 </div>
 
        </div>

        <!-- 会员信息部分 -->
        <div class="membership-info">
            <h2>{{ membership_info.membership }}</h2>
            <p>{{ membership_info.status }}</p>
            <div class="membership-actions">
                {% for action in membership_info.membership_actions %}
                <a href="{{ url_for('membership') }}" class="action-link">{{ action }}</a>
                {% endfor %}
            </div>
        </div>

        <!-- 会员权益部分 -->
        <div class="benefits">
            <h3>会员权益</h3>
            <div class="benefit-list">
                {% for benefit in benefits %}
                <div class="benefit-item">
                    <img src="{{ url_for('static', filename=benefit.icon_path) }}" alt="{{ benefit.label }}" class="benefit-icon">
                    <span>{{ benefit.label }}</span>
                </div>
                {% endfor %}
            </div>
        </div>

        <!-- 其他功能部分 -->
        <div class="sections">
            <h3>其他功能</h3>
            <div class="section-list">
                {% for section in sections %}
                <div class="section-item">
                    <a href="{{ url_for('increase_book_power') if section.label == '书力值' else (url_for('game_center') if section.label == '游戏中心' else '#') }}" class="section-link">
                        <img src="{{ url_for('static', filename=section.icon_path) }}" alt="{{ section.label }}" class="section-icon">
                        <span>{{ section.label }}</span>
                    </a>
                </div>
                {% endfor %}
            </div>
        </div>

        <!-- 其他链接部分 -->
        <div class="other-links">
            <h3>其他链接</h3>
            <div class="link-list">
                {% for link in other_links %}
                <div class="link-item">
                    <a href="{{ link.link }}" style="color: #fff;">
                        <img src="{{ url_for('static', filename=link.icon_path) }}" alt="{{ link.label }}" class="link-icon">
                        {{ link.label }}
                    </a>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>

    <!-- 底部导航栏 -->
    {% include 'footer.html' %}

    <!-- 上传头像的弹窗 -->
<div id="uploadModal" style="display: none;" class="upload-modal">
    <div class="modal-content">
        <span id="cancelButton" class="close">&times;</span>
        <h3>上传头像</h3>
        <form id="uploadForm" action="{{ url_for('upload_avatar') }}" method="POST" enctype="multipart/form-data">
            <input type="file" id="file-input" name="avatar" accept="image/*" onchange="previewAvatar(event)" required>
            <br>
            <button type="submit" id="uploadButton">上传</button>
        </form>
    </div>
</div>


    <script>
        // 打开文件选择框
        function openFileDialog() {
            document.getElementById('file-input').click();
        }

        // 预览上传的头像
        function previewAvatar(event) {
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    document.getElementById('profile-picture').src = e.target.result;
                };
                reader.readAsDataURL(file);
            }
        }

        // 弹窗控制
        const profilePicture = document.getElementById('profile-picture');
        const uploadModal = document.getElementById('uploadModal');
        const fileInput = document.getElementById('file-input');
        const uploadButton = document.getElementById('uploadButton');
        const cancelButton = document.getElementById('cancelButton');

        profilePicture.addEventListener('click', () => {
            uploadModal.style.display = 'block'; // 显示弹窗
        });

        cancelButton.addEventListener('click', () => {
            uploadModal.style.display = 'none'; // 隐藏弹窗
            fileInput.value = ''; // 清空文件输入框
        });

        uploadButton.addEventListener('click', () => {
            const file = fileInput.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = (e) => {
                    profilePicture.src = e.target.result; // 更新头像
                    uploadModal.style.display = 'none'; // 隐藏弹窗
                };
                reader.readAsDataURL(file);
            } else {
                alert('请选择一张图片');
            }
        });

        // 点击其他地方关闭弹窗
        window.addEventListener('click', (e) => {
            if (e.target === uploadModal) {
                uploadModal.style.display = 'none';
                fileInput.value = '';
            }
        });
    </script>
</body>
</html>  